<template>
  <div style="width: 800px;margin: 0 auto;">
    <div id="demo3" style="width: 400px;height: 20px;
    background: #eea2a4;margin: 0 auto;
    line-height: 20px;padding: 40px;
    border: 1px solid blanchedalmond;
    z-index: 10;
    box-shadow: 10px 10px 10px;
    ">
      HELLO
    </div>

    <br>
    <br>
    <br>

    <div id="demo" style="width: 400px;height: 20px;
    background: #43b244;margin: 0 auto;
    line-height: 20px;padding: 40px;
    border: 1px solid blanchedalmond;
    z-index: 10;
    ">
      HELLO
    </div>

    <div id="demo2" style="width: 400px;height: 20px;
    background: #303133;
    left: 50%;
     transform: translate(-50%, -90%);
    line-height: 20px;padding: 40px;
    border: 1px solid blanchedalmond;
    border-radius: 5px;
    position: absolute;
    z-index: -100;
    filter: blur(5px);
    ">
      HELLO
    </div>
    <br>
    <br>
    <br>
    <el-slider v-model="moving"></el-slider>

    <button @click="move">
      GO
    </button>
  </div>
</template>

<script>
import anime from 'animejs/lib/anime.es.js';
export default {
  name: "firstDemo",
  data(){
    return{
      moving:50
    }
  },
  watch:{
    // 如果 `question` 发生改变，这个函数就会运行
    // question: function (newQuestion, oldQuestion) {
    //   this.answer = 'Waiting for you to stop typing...'
    //   this.debouncedGetAnswer()
    // }
    moving:(newVal,oldVal)=>{
      anime({
        targets: '#demo',
        translateX: (newVal - 50)*3
      });
      anime({
        targets: '#demo2',
        translateX: (newVal - 50)*3.3
      });
    }

  },
  methods:{

    move(){
      anime({
        targets: '#demo',
        translateX: 250
      });
    }
  }
}
</script>

<style scoped>

</style>
